<template>
  <div :id="id" :style="{height:height,width:width}"/>
</template>

<script>
import * as echarts from 'echarts'
import _ from 'lodash'

const opOpt = {
  legend: {
    data: ['花费', '需求数', '有花费账户']
  },
  dataset: {
    dimensions: ['userName', 'spend', 'requestCount', 'accountCount'],
  },
  tooltip: {
    formatter: function (params) {
      var html = ''
      html = `<div>
                    <strong>${params[0].axisValueLabel}</strong>
                    <div style="margin-top: 8px">花费：${params[0].data.spend.toFixed(2)}</div>
                    <div style="margin-top: 8px">需求数：${params[0].data.requestCount}</div>
                    <div style="margin-top: 8px">有花费账户：${params[0].data.accountCount}</div>
              </div>`
      return html
    }
  },
  series: [
    {
      name: '花费',
      type: 'bar',
      barGap: 0,
    },
    {
      name: '需求数',
      type: 'bar',
      barGap: 0,
    },
    {
      name: '有花费账户',
      type: 'bar',
      barGap: 0,
    }
  ]
}

const designOpt = {
  legend: {
    data: ['需求数', '成品素材', '制作用时', '原创率']
  },
  dataset: {
    dimensions: ['userName', 'requestCount', 'creativeCount', 'makeTime', 'originateRate'],
  },
  tooltip: {
    formatter: function (params) {
      var html = ''
      html = `<div>
                    <strong>${params[0].axisValueLabel}</strong>
                    <div style="margin-top: 8px">需求数：${params[0].data.requestCount}</div>
                    <div style="margin-top: 8px">成品素材：${params[0].data.creativeCount}</div>
                    <div style="margin-top: 8px">制作用时：${(params[0].data.makeTime / 3600).toFixed(0)}时${((params[0].data.makeTime % 3600) / 60).toFixed(0)}分</div>
                    <div style="margin-top: 8px">原创率：${params[0].data.originateRate}%</div>
              </div>`
      return html
    }
  },
  series: [
    {
      name: '需求数',
      type: 'bar',
      barGap: 0
    },
    {
      name: '成品素材',
      type: 'bar',
      barGap: 0,
    },
    {
      name: '制作用时',
      type: 'bar',
      barGap: 0,
    },
    {
      name: '原创率',
      type: 'bar',
      barGap: 0,
    }
  ]
}

const opDesignOpt = {
  legend: {
    data: ['花费', '需求数', '成品素材']
  },
  dataset: {
    dimensions: ['userName', 'totalSpend', 'totalRequestCount', 'totalCreativeCount'],
  },
  tooltip: {
    formatter: function (params) {
      var html = ''
      var row = 4
      html = `<div>
                    <strong>${params[0].axisValueLabel}</strong>
                    <div style="margin-top: 8px">花费：${params[0].data.totalSpend.toFixed(2)} ${ params[0].data.userList.length> 0 ? `<span style="display: inline-block;vertical-align: top">( ${params[0].data.userList.map((item, index) => {
        if (index !== 0 && index % row === 0) {
          return '<br/ >' + item.userName + ':' + item.spend.toFixed(2)
        } else {
          return '&nbsp;' + item.userName + ':' + item.spend.toFixed(2)
        }
      })} )</span>`: ''}</div>
                    <div style="margin-top: 8px">需求数：${params[0].data.totalRequestCount} ${ params[0].data.userList.length> 0 ? `<span style="display: inline-block;vertical-align: top">( ${params[0].data.userList.map((item, index) => {
        if (index !== 0 && index % row === 0) {
          return '<br/ >' + item.userName + ':' + item.requestCount
        } else {
          return '&nbsp;' + item.userName + ':' + item.requestCount
        }
      })} )</span>`: ''} </div>
                    <div style="margin-top: 8px">成品素材：${params[0].data.totalCreativeCount} ${ params[0].data.userList.length> 0 ? `<span style="display: inline-block;vertical-align: top">( ${params[0].data.userList.map((item, index) => {
        if (index !== 0 && index % row === 0) {
          return '<br/ >' + item.userName + ':' + item.creativeCount
        } else {
          return '&nbsp;' + item.userName + ':' + item.creativeCount
        }
      })} )</span>` : ''} </div>
              </div>`
      return html
    }
  },
  series: [
    {
      name: '花费',
      type: 'bar',
      barGap: 0,
    },
    {
      name: '需求数',
      type: 'bar',
      barGap: 0,
    },
    {
      name: '成品素材',
      type: 'bar',
      barGap: 0,
    }
  ]
}
const designOpOpt = {
  legend: {
    data: ['花费', '需求数', '成品素材']
  },
  dataset: {
    dimensions: ['userName', 'totalSpend', 'totalRequestCount', 'totalCreativeCount'],
  },
  tooltip: {
    formatter: function (params) {
      var html = ''
      var row = 4
      html = `<div>
                    <strong>${params[0].axisValueLabel}</strong>
                    <div style="margin-top: 8px">花费：${params[0].data.totalSpend.toFixed(2)} ${ params[0].data.userList.length> 0 ? `<span style="display: inline-block;vertical-align: top">( ${params[0].data.userList.map((item, index) => {
        if (index !== 0 && index % row === 0) {
          return '<br/ >' + item.userName + ':' + item.spend.toFixed(2)
        } else {
          return '&nbsp;' + item.userName + ':' + item.spend.toFixed(2)
        }
      })} )</span>`: ''}</div>
                    <div style="margin-top: 8px">需求数：${params[0].data.totalRequestCount} ${ params[0].data.userList.length> 0 ? `<span style="display: inline-block;vertical-align: top">( ${params[0].data.userList.map((item, index) => {
        if (index !== 0 && index % row === 0) {
          return '<br/ >' + item.userName + ':' + item.requestCount
        } else {
          return '&nbsp;' + item.userName + ':' + item.requestCount
        }
      })} )</span>`: ''} </div>
                    <div style="margin-top: 8px">成品素材：${params[0].data.totalCreativeCount} ${ params[0].data.userList.length> 0 ? `<span style="display: inline-block;vertical-align: top">( ${params[0].data.userList.map((item, index) => {
        if (index !== 0 && index % row === 0) {
          return '<br/ >' + item.userName + ':' + item.creativeCount
        } else {
          return '&nbsp;' + item.userName + ':' + item.creativeCount
        }
      })} )</span>` : ''} </div>
              </div>`
      return html
    }
  },
  series: [
    {
      name: '花费',
      type: 'bar',
      barGap: 0,
    },
    {
      name: '需求数',
      type: 'bar',
      barGap: 0,
    },
    {
      name: '成品素材',
      type: 'bar',
      barGap: 0,
    }
  ]
}
export default {
  name: "ChartOp",
  props: {
    id: {
      type: String,
      default: 'id'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    },
    chartData: {
      type: Array,
      default: () => {
        return []
      }
    },
    type: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
      window.addEventListener('resize', () => {
        if (this.chart) {
          this.chart.resize()
        }
      })
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
    window.removeEventListener('resize', () => {
      this.chart.resize()
    })
  },
  methods: {
    initChart() {
      // 表格配对象
      const base = {
        grid: {
          left: '8%',
          bottom: '18%',
          width: '88%',
          height: '75%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        dataset: {
          source: this.chartData
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {show: false},
          }
        ],
        yAxis: [
          {}
        ],
        dataZoom: [
          {
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            handleSize: 20,//滑动条的 左右2个滑动条的大小
            height: 8,//组件高度
            left: 30, //左边的距离
            right: 40,//右边的距离
            bottom: 10,//右边的距离
            handleColor: '#ddd',//h滑动图标的颜色
            handleStyle: {
              borderColor: "#cacaca",
              borderWidth: "1",
              shadowBlur: 2,
              background: "#ddd",
              shadowColor: "#ddd",
            },
            fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
              //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
              //给第一个设置0，第四个设置1，就是垂直渐变
              offset: 0,
              color: '#1eb5e5'
            }, {
              offset: 1,
              color: '#5ccbb1'
            }]),
            backgroundColor: '#ddd',//两边未选中的滑动条区域的颜色
            showDataShadow: false,//是否显示数据阴影 默认auto
            showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
            handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
            filterMode: 'filter',
            minValueSpan: 5,
            maxValueSpan: 5,
            brushSelect: false
          },
          //下面这个属性是里面拖到
          {
            type: 'inside',
            show: true,
            xAxisIndex: [0],
            zoomLock: true
          }
        ]
      }
      let option = null
      switch (this.type) {
        case 'op':
          option = _.merge(base, opOpt)
          break
        case 'design':
          option = _.merge(base, designOpt)
          break
        case 'op-design':
          option = _.merge(base, opDesignOpt)
          break
        case 'design-op':
          option = _.merge(base, designOpOpt)
          break
      }


      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption(option)
      // 点击tooltips高亮处给绑定事件
      this.chart.getZr().on('click', this.clickChart)
    },
    clickChart(e) {
      // console.log('表格点击', e)

      let pointInPixel = [e.offsetX, e.offsetY]
      if (this.chart.containPixel('grid', pointInPixel)) {
        //点击第几个柱子
        let pointInGrid = this.chart.convertFromPixel({seriesIndex: 0}, pointInPixel)
        // 也可以通过params.offsetY 来判断鼠标点击的位置是否是图表展示区里面的位置
        // 也可以通过name[xIndex] != undefined，name是x轴的坐标名称来判断是否还是点击的图表里面的内容
        // x轴数据的索引
        let xIndex = pointInGrid[0]
        // y轴数据的索引
        // let yIndex = pointInGrid[1]
        const res = this.chartData[xIndex]
        this.$emit('click', res, this.type)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
